<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Chart.js v4.2.1 Demo</title>
		<meta name="viewport" content="width=device-width, initial-scale=1">

		<style>
			.chart-container {
				position: relative;
				margin: auto;
				height: 600px;
				width: 1920px;
			}
		</style>
	</head>
	<body>
		<h2 id="wait">Loading lib....</h2>

		<script src="https://cdn.jsdelivr.net/npm/chart.js@4"></script>
		<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns"></script>

		<div class="chart-container">
			<canvas id="chart1"></canvas>
		</div>

		<script>
			function round2(val) {
				return Math.round(val * 100) / 100;
			}

			function round3(val) {
				return Math.round(val * 1000) / 1000;
			}

			function prepData(packed) {
				console.time('prep');

				// epoch,idl,recv,send,read,writ,used,free

				const numFields = packed[0];
				packed = packed.slice(numFields + 1);

				var cpu = Array(packed.length/numFields);
				var ram = Array(packed.length/numFields);
				var tcp = Array(packed.length/numFields);

				for (let i = 0, j = 0; i < packed.length; i += numFields, j++) {
					let date = packed[i] * 60 * 1000;
					cpu[j] = {x: date, y: round3(100 - packed[i+1])};
					ram[j] = {x: date, y: round2(100 * packed[i+5] / (packed[i+5] + packed[i+6]))};
					tcp[j] = {x: date, y: packed[i+3]};
				}

				console.timeEnd('prep');

				return [cpu, ram, tcp];
			}

			function makeChart(data) {
				console.time('chart');

				var ctx = document.getElementById('chart1').getContext('2d');
				var cfg = {
					data: {
						datasets: [
							{
								label: 'CPU',
								borderColor: 'rgb(255, 99, 132)',
								data: data[0],
								type: 'line',
								radius: 0,
								fill: false,
								borderWidth: 1
							},
							{
								label: 'RAM',
								borderColor: 'rgb(54, 162, 235)',
								data: data[1],
								type: 'line',
								radius: 0,
								fill: false,
								borderWidth: 1
							},
							{
								label: 'TCP Out',
								borderColor: 'rgb(75, 192, 192)',
								data: data[2],
								type: 'line',
								radius: 0,
								fill: false,
								borderWidth: 1
							}
						]
					},
					options: {
						animation: false,
						maintainAspectRatio: false,
						parsing: false,
						spanGaps: true,
						normalized: true,
						interaction: {
							mode: 'nearest',
							axis: 'x',
							intersect: false
						},
						scales: {
							x: {
								type: 'time',
								stacked: false,
								ticks: {
									source: 'auto',
									maxRotation: 0,
									autoSkip: true,
									autoSkipPadding: 75,
									sampleSize: 1
								}
							},
							y: {
								type: 'linear',
								stacked: false,
								scaleLabel: {
									display: true,
									labelString: '%'
								}
							},
							y2: {
								type: 'linear',
								stacked: false,
								position: 'right',
								scaleLabel: {
									display: true,
									labelString: 'MB'
								}
							}
						},
						plugins: {
							decimation: {
								enabled: true
							}
						}
					}
				};

				var chart = new Chart(ctx, cfg);

				wait.textContent = "Done!";
				console.timeEnd('chart');
			}

			let wait = document.getElementById("wait");
			wait.textContent = "Fetching data.json (2.07MB)....";
			fetch("data.json").then(r => r.json()).then(packed => {
				wait.textContent = "Rendering...";
				let data = prepData(packed);
				setTimeout(() => makeChart(data), 0);
			});
		</script>

		<p>
			Code based on<br>
			<a href="https://www.chartjs.org/samples/latest/scales/time/financial.html">https://www.chartjs.org/samples/latest/scales/time/financial.html</a><br>
		</p>
	</body>
</html>
